<script setup lang='ts'>
import { PureTableBar } from "@/components/RePureTableBar";
import { useFXhooks } from "./hooks/FXhooks";
const {
  risky,
  riskfree,
  dataList,
  loading,
  columns3,
  pagination,
  ModelDataList,
  submissionName,
  GetDataList,
  handleSizeChange,
  GetEchartsDataList,
  handleCurrentChange
} = useFXhooks('2');
</script>

<template>
  <!-- 3.3.5.5.3.3.1.非常规交易监控中心 -->
  <div class="main">
    <div class="main_top">
      <div class="main_stubim">
        <el-form-item label="策略名称">
          <el-select v-model="submissionName">
            <el-option v-for="t in ModelDataList" :key="t.strategyCenterId" :label="t.strategyName"
              :value="t.strategyCenterId" />
          </el-select>
        </el-form-item> &nbsp;&nbsp;
        <el-form-item><el-button type="primary"
            @click="[GetDataList(), GetEchartsDataList()]">确认</el-button></el-form-item>
      </div>
      <div class="main_echart">
        <ul class="main_echart_left">
          <dl>
            <dd>有风险客户数量</dd>
            <dd>{{ risky }}人</dd>
          </dl>
          <dl>
            <dd>无风险客户数量</dd>
            <dd>{{ riskfree }}人</dd>
          </dl>
        </ul>
        <ul class="main_echart_right">
          <div class="content" id="content"></div>
        </ul>
      </div>
    </div>
    <div class="main_bottom">
      <PureTableBar class="list_hei">
        <template v-slot="{ size, checkList }">
          <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
            :data="dataList" :columns="columns3" :checkList="checkList" :pagination="pagination" max-height="550"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }">
          </pure-table>
        </template>
      </PureTableBar>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

.main {
  height: 100%;
}

.main_top {
  height: 49.5%;
  padding: 10px;
  border: 1px solid #dcdfe6;
}

.main_bottom {
  top: 1%;
  height: 49.5%;
  position: relative;
  border: 1px solid #dcdfe6;
}

.main_stubim {
  display: flex;
  align-items: center;

  :deep(.el-form-item) {
    margin-bottom: 0;
  }
}

:deep(.list_hei) {
  .flex {
    display: none;
  }
}

:deep(.list_hei.p-2) {
  padding: 0;
}

:deep(.list_hei.mt-6) {
  margin: 0;
}

:deep(.pure-table) {
  height: calc(100% - 15px);
}

.main_echart {
  width: 100%;
  display: flex;
  height: calc(100% - 35px);

  .main_echart_left {
    width: 30%;
    text-align: center;
    padding: 20px 0;

    dl {
      padding: 25px;

      dd {
        &:nth-child(2) {
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }

  .main_echart_right {
    width: 70%;

    .content {
      min-width: 400px;
      height: 100%;
    }
  }
}

@media screen and (max-width:1600px) {
  :deep(.el-table--fit) {
    height: 78%;
  }
}
</style>


